<script setup>
import {deleteTableRow} from "../../../../utils/utils.js";
import {storeToRefs} from "pinia";
import {useItem} from "../../../../store/index.js";
import {ElMessage} from "element-plus";




const {item} = storeToRefs(useItem())
const useItemer = useItem()
const props = defineProps({
  volumeMounts: {
     type: Array,
     default: [],
   }
})

// 定义添加端口的函数
const addVolumeMounts =()=>{
  if( useItemer.item.spec.template.spec.volumes.length === 0){
      ElMessage.warning("请先添加volume")
    return
  }
    const volumeMount = {
      name: '',
      mountPath: '',
      subPath: '',
      readOnly: false
    }
  props.volumeMounts.unshift(volumeMount)
}

</script>

<template>
    <el-table border :data="props.volumeMounts"  >
       <el-table-column align="center" prop="name" label="选择Volume" width="240px">
         <template #default="scope">
           <el-form-item label-width="0" style="margin-bottom: 0">
             <el-select v-model="scope.row.name" placeholder="请选择挂载的卷">
               <el-option
                   v-for="volume in item.spec.template.spec.volumes"
                   :key="volume.name"
                   :label="volume.name"
                   :value="volume.name"
               >
               </el-option>
             </el-select>
           </el-form-item>
         </template>
       </el-table-column>
      <el-table-column align="center" prop="mountPath" label="挂载路径">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-input :controls="false" v-model.trim="scope.row.mountPath" placeholder="请输入挂载路径" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="subPath" label="挂载子路径">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-input :controls="false" v-model.trim="scope.row.subPath" placeholder="请输入挂载子路径(可选)" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="readOnly" label="只读挂载" width="140px">
        <template #default="scope">
          <el-form-item label-width="0" style="margin-bottom: 0">
            <el-switch v-model="scope.row.readOnly"></el-switch>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="添加" width="140px">
        <template #header>
          <el-button link type="primary" @click="addVolumeMounts()">
            添加
          </el-button>
        </template>
        <template #default="scope">
          <el-button link type="warning" @click="deleteTableRow(props.volumeMounts,scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<style scoped>

</style>